<template>
    <div class="custom-tree-container" style="margin-top: 15px;">
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" @click="addSchoolShow=true" icon="el-icon-circle-plus-outline" round>新增学院</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataTree" border style="width: 100%" highlight-current-row>
            <el-table-column type="index" width="50"></el-table-column>
            <table-tree-column
                prop="name"
                header-align="center"
                childkey="children"
                levelKey="adminrank"
                width="250"
                label="名称">
            </table-tree-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-show="scope.row.adminrank!=5" type="primary" size="mini" @click="()=>append(scope.row)" round icon="el-icon-circle-plus-outline">
                        <span v-if="scope.row.adminrank==2">添加系</span>
                        <span v-if="scope.row.adminrank==3">添加专业</span>
                        <span v-if="scope.row.adminrank==4">添加班级</span>
                    </el-button>
                    <el-button type="danger" size="mini" @click="()=>remove(scope,scope.row)" icon="el-icon-delete" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" @click="addSchoolShow=true">添加学院</el-button>
        </div>
        <div class="block" style="margin-top: 20px;">
            <el-tree node-key="id" :data="dataTree" default-expand-all :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node,data }">
                    <span>{{ data.name }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="()=>append(data)">
                            <span v-if="data.adminrank==2">添加系</span>
                            <span v-if="data.adminrank==3">添加专业</span>
                            <span v-if="data.adminrank==4">添加班级</span>
                        </el-button>
                        <el-button type="text" size="mini" @click="()=>remove(node,data)">删除</el-button>
                    </span>
                </span>
            </el-tree>
        </div>

        <el-dialog :visible.sync="addSchoolShow" title="添加学院">
            <el-input placeholder="请输入名称" clearable v-model="schoolname"/>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native.prevent="addSchool">确定</el-button>
                <el-button @click="addSchoolShow=false;schoolname=''">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="addOrgnizeShow" title="添加系/专业/班级">
            <el-input placeholder="请输入名称" clearable v-model="orgnizename"/>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native.prevent="addOrgnize">确定</el-button>
                <el-button @click="addOrgnizeShow=false;orgnizename=''">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import TableTreeColumn from '@/components/table-tree-column/index'
    export default {
        name: "school-major-class",
        data() {
            return {
                dataTree:[],
                addSchoolShow:false,
                addOrgnizeShow:false,
                schoolname:'',
                orgnizename:'',
                parentOrgnizeData:{}
            }
        },
        components:{
            TableTreeColumn
        },
        mounted(){
            this.getDataList();
        },
        methods: {
            /**
             * 附加字段adminrank
             * 1：学校
             * 2：学院
             * 3：系
             * 4：专业
             * 5：班级
             * 通过adminrank判断当前节点是属于哪一层组织
             * 如果要获得树结构则想到哪一层就在url后跟上adminrank对应数字
             * eg：/api/school/getSchoolMajorClassTree/4  获得从学院至专业的树结构
             */
            append(data) {
                this.addOrgnizeShow = true;
                this.parentOrgnizeData = data;
            },
            remove(node, data) {
                console.log(node);
                console.log(data);
            },
            addOrgnize(){
                let urlApi = '/api';
                let param = {
                    name:this.orgnizename,
                };
                switch (this.parentOrgnizeData.adminrank){
                    case 1:
                        break;
                    case 2:
                        urlApi += '/department/add';
                        param.schoolid = this.parentOrgnizeData.id;
                        break;
                    case 3:
                        urlApi += '/major/add';
                        param.departmentid = this.parentOrgnizeData.id;
                        break;
                    case 4:
                        urlApi += '/class/add';
                        param.majorid = this.parentOrgnizeData.id;
                        break;
                    case 5:
                        break;
                }
                console.log(urlApi);
                console.log(param);
                this.$http.post(urlApi,param).then((res) => {
                    if(res.data.code){
                        this.$message.error(res.data.msg);
                    }else {
                        this.$message({
                            message:"添加成功",
                            type:'success'
                        });
                        this.getDataList();
                        this.addOrgnizeShow=false;
                        this.orgnizename='';
                    }
                }).then((error) => {
                    console.log(error);
                });
            },
            addSchool(){
                if(this.schoolname===''){
                    this.$message.error("名称不得为空");
                }else {
                    let param = {
                        universityid:1,
                        name:this.schoolname,
                        status:1
                    };
                    this.$http.post("/api/school/add",param).then((res) => {
                        if(res.data.code===0){
                            this.$message({
                                message:res.data.msg,
                                type:"success"
                            });
                            this.getDataList();
                            this.addSchoolShow=false;
                            this.orgnizename = '';
                        }else {
                            this.$message({
                                message:res.data.msg,
                                type:"error"
                            });
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$message.error("创建失败，请重试");
                    })
                }
            },
            getDataList(){
                this.$http.get("/api/school/getSchoolMajorClassTree/5").then((res) => {
                    if(res.data.code){
                        this.$message.error(res.data.msg);
                    }else {
                        this.dataTree = JSON.parse(JSON.stringify(res.data.data));
                        console.log(this.dataTree);
                    }
                }).catch((error) => {
                    console.log(error);
                })
            }
        },
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 17px;
        padding-left: 1%;
        padding-right: 65%;
    }
</style>
